<ion-header>
    <ion-toolbar content-page>
        <!--<ion-buttons start>-->
        <!--<button ion-button icon-only navPop>-->
        <!--<i class="back"></i>-->
        <!--</button>-->
        <!--</ion-buttons>-->
        <ion-title>
            直播
        </ion-title>

        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>

    </ion-toolbar>
</ion-header>


<ion-content>
    <ion-refresher (ionRefresh)="doRefresh($event)" [pullMax]="800">
        <ion-refresher-content></ion-refresher-content>
    </ion-refresher>

    <div class="info-hd">
        <div class="search-bar">
            <input id="keyword" type="text" placeholder="标题" [(ngModel)]="keyWord" maxlength="32" (keyup.Enter)="inputKeyUp($event)">
            <i (click)="searchByKeyWord($event,false)"></i>
        </div>
        <button ion-button (click)="goCollectionList()">收藏夹</button>
    </div>
    <div class="recommend-wrap" *ngIf="recommendVideoList.length>0">
        <div class="recommend-font">推荐</div>
    </div>
    <div class="recommend-list" *ngIf="recommendVideoList.length>0">
        <div class="msl-card" *ngFor="let item of recommendVideoList">
            <div (click)="seeLiveVideoDetail(item)">


                <div class="play-img-btn" *ngIf="item.type===5 || item.type===1"></div>
                <img class="msl-card-img" [src]="item.webcastImgUrl">
                <div class="msl-card-ft">
                    <div class="msl-card_title" [innerHTML]="item.subject"></div>
                    <div class="statu-bar">
                        <div class="msl-card-label msl-card-label_living" *ngIf="item.type===1">正在直播</div>
                        <div class="msl-card-label msl-card-label_on_time" *ngIf="item.type===2"
                             [innerHTML]="item.webcastStartTime"></div>
                        <div class="msl-card-label msl-card-label_play_back" *ngIf="item.type===5">回放</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div *ngIf="recommendVideoList.length>0" class="division-area">
    </div>
    <div class="recommend-wrap">
        <div class="recommend-font">
            回放
        </div>
    </div>
    <div class="playback-wrap">
        <div class="playback-nav" *ngFor="let item of playVideoTypeList; ">

                <div
                    [ngClass]="{ 'selected': selectedVideoType== item.id ,'not-selected':selectedVideoType != item.id, 'fourth-margin': item.selfIndex % 4==0, 'other-margin':item.selfIndex %4!=0 }"
                    (click)="getPlayBackVideosByType(item.id)" [innerHTML]="item.name">
                </div>

        </div>

        <div class="playback-list">
            <div *ngFor="let item of playBackVideoList; let i=index">
                <div class="play-video-item" [ngClass]="{'evenMargin': i % 2 !=0 }"
                     (click)="seePlayBackVideoDetail(item)">
                    <div class="play-img-btn"></div>
                    <div class="play-video-detail">
                        <img class="play-video-img" [src]="item.webcastImgUrl">
                    </div>
                    <div class="play-video-other">
                        <div class="play-video-title" [innerHTML]="item.subject"></div>
                        <div class="play-video-time"
                             [innerHTML]="moment(item.webcastStartTime*1000).format('YYYY/MM/DD')"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="more-video-area" (click)="goMoreBackPlayVideos()">
        更多回放
    </div>
    <div class="bottom-warp"></div>
</ion-content>
